<template>
  <el-breadcrumb separator="/" style="display:flex;font-size: 18px;font-weight: 1000;">
    <el-breadcrumb-item
      v-for="(breadcrumb, index) in breadcrumbs" :key="index"
    >
      {{ breadcrumb.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const breadcrumbs = computed(() => 
  route.matched.filter(record => record.meta && record.meta.breadcrumb).map(record => ({ name: record.meta.breadcrumb }))
);


</script>

<style scoped>
/* .el-breadcrumb-item.is-active {
  color: #6c757d; 
} */

</style>